<template>
    <div class="main_content">
        <div class="content">
            <div class="left">
                <el-button type="primary" @click="updatedictTypeRow(0)" size="small" plain>添加字典表类型</el-button>
                <div class="table">
                    <el-table ref="classTable" :data="dictList" :row-class-name="tableRowClassName" @row-click="onRowClick" :highlight-current-row="true" @current-change="highlightChange">
                        <el-table-column label="名称" prop="name"></el-table-column>
                        <el-table-column label="编码" prop="code"></el-table-column>
                        <el-table-column fixed="right" label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="updatedictTypeRow(1,scope.$index, dictList)" type="text" size="small">编辑</el-button>
                                <el-button style="color:red" @click.native.prevent="removeDict(scope.$index, dictList)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="clearfix" v-show="dictList.length>0">
                    <div class="float-right">
                        <Page v-if="totalCount" style="margin: 20px 0;text-align: right;" :current.sync="current" :total="totalCount" :page-size="10" show-elevator show-total @on-change="pageChange"></Page>
                    </div>
                </div>
            </div>
            <div class="right">
                <el-button type="primary" @click="updateDetailDictRow(0)" size="small" plain>添加数据字典</el-button>
                <div class="table">
                    <el-table :data="sysDictList">
                        <el-table-column label="名称" prop="name"></el-table-column>
                        <el-table-column label="编码" prop="code"></el-table-column>
                        <el-table-column fixed="right" label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="updateDetailDictRow(1,scope.$index, sysDictList)" type="text" size="small">编辑</el-button>
                                <el-button style="color:red" @click.native.prevent="removeDetailRow(scope.$index, sysDictList)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="clearfix" v-show="sysDictList.length>0">
                    <div class="float-right">
                        <Page v-if="systotalCount" style="margin: 20px 0;text-align: right;" :current.sync="syscurrent" :total="systotalCount" :page-size="10" show-elevator show-total @on-change="syspageChange"></Page>
                    </div>
                </div>
            </div>
        </div>

        <Modal v-model="dictTypeModal" :title="isAdd?'添加字典表类型':'编辑字典表类型'" width="520px;" :mask-closable="false">
            <div class="item3">
                <span>字典表类型编码:</span>
                <Input v-model="dictCode" placeholder="请输入字典表类型编码" style="width: 300px" clearable/>
            </div>
            <div class="item3">
                <span class="tip">*</span>
                <span>字典表类型名称:</span>
                <Input v-model="dictName" placeholder="请输入字典表类型名称" style="width: 300px" clearable/>
            </div>
            <div slot="footer">
                <el-button @click="cancel(0)" type="info" size="small" plain>取消</el-button>
                <el-button @click="sumbitDictType" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="deleteDictModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="deteleDict" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="detailDictModal" :title="title" width="520px;" :mask-closable="false" >
            <div class="add_top" v-if="detailDictModal" style="width:96%;margin:0 auto;position:relative">
                <div class="item3">
                    <span>数据字典code:</span>
                    <Input v-model="detailDictCode" placeholder="请输入新增数据字典code" style="width: 300px" clearable/>
                </div>
                <div class="item3">
                    <span class="tip">*</span>
                    <span>数据字典名称:</span>
                    <Input v-model="detailDictName" placeholder="请输入新增数据字典名称" style="width: 300px" clearable/>
                </div>
                
            </div>
            <div slot="footer">
                <el-button @click="sumbitcancel" type="info" size="small" plain v-preventReClick="1500">取消</el-button>
                <el-button @click="sumbitSysDictType" type="primary" size="small" plain>确定</el-button>
            </div>
        </Modal>

        <Modal v-model="deleteDetailModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(3)" type="info" size="small" plain>取消</el-button>
                <el-button @click="deteleDetailDict" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
    getDictTypeList,
    getDictTypeAdd,
    getDictTypeEdit,
    getDictTypeRemove,
    getDictType,
    getDictAdd,
    getDictEdit,
    getDictRemove,
} from "@/api/api.js";
export default {
    data() {
        return {
            classBgcFlag: 0,
            totalCount: "",
            current: 1,
            pageNum: 1,
            pageSize: 10,
            systotalCount: "",
            syscurrent: 1,
            syspageNum: 1,
            syspageSize: 10,
            dictList: [],
            isAdd: true,
            dictTypeModal: false,
            deleteDictModal: false,
            detailDictModal: false,
            dictName: "",
            dictCode: "",
            dictID: "",
            id: "",
            title: "",
            sysDictList: [],
            sysID: "",
            detailDictCode: "",
            detailDictName: "",
            detailDictSysModal: false,
            detailIsAdd: true,
            detailId: "",
            deleteDetailModal: false,
            ids: "",
            detailsIndex: "",
            detailsRows: [],
            inputChange: false,
            isRowFlag: true,
            oldCurrentRow: "",
            dataFlag: true,
        };
    },
    watch: {
        deleteDictModal(val) {
            if (!val) {
                this.isRowFlag = true;
            }
        },
        dictTypeModal(val) {
            if (!val && !this.isAdd) {
                this.isRowFlag = true;
            }
        },
        dictList(val) {
            this.$nextTick(function () {
                this.$refs.classTable.setCurrentRow(this.dictList[0]);
            });
        },
    },
    methods: {
        tableRowClassName({ row, rowIndex }) {
            //把每一行的索引放进row
            row.index = rowIndex;
        },
        onRowClick(row, event, column) {
            //点击获取索引
            if (this.isRowFlag) {
                const index = row.index;
                this.getDictDetail(index, this.dictList, "class");
            }
        },
        highlightChange(currentRow, oldCurrentRow) {
            if (this.oldCurrentRow) {
                this.oldCurrentRow = false;
                this.$refs.classTable.setCurrentRow(
                    this.dictList[oldCurrentRow.index]
                );
            }
        },
        //查询字典表类型
        getDictList() {
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
            };
            getDictTypeList(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.dictList = res.data.list;
                        if (this.dataFlag) {
                            this.getDictDetail(0, this.dictList);
                            this.dataFlag = false;
                        }
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        pageChange(index) {
            this.pageNum = index;
            this.getDictList();
        },
        updatedictTypeRow(type, index, rows) {
            this.dictTypeModal = true;
            this.oldCurrentRow = true;
            if (type == 0) {
                this.isAdd = true;
                this.dictName = "";
                this.dictCode = "";
            } else {
                this.isAdd = false;
                this.isRowFlag = false;
                this.dictName = rows[index].name;
                this.dictCode = rows[index].code;
                this.dictID = rows[index].id;
            }
        },
        sumbitDictType() {
            if (this.dictName == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "字典表类型名称不能为空",
                });
                return;
            }
            let params = {};
            if (this.isAdd) {
                params = {
                    code: this.dictCode,
                    name: this.dictName,
                };
                getDictTypeAdd(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.success();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            } else {
                params = {
                    code: this.dictCode,
                    name: this.dictName,
                    id: this.dictID,
                };
                getDictTypeEdit(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.success();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            }
        },
        success() {
            this.$Message.success("操作成功");
            this.dictTypeModal = false;
            this.pageNum = this.isAdd ? 1 : this.pageNum;
            this.current = this.isAdd ? 1 : this.current;
            this.getDictList();
        },
        removeDict(index, rows) {
            this.isRowFlag = false;
            this.deleteDictModal = true;
            this.id = rows[index].id;
        },
        deteleDict() {
            getDictTypeRemove(this.id)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.deleteDictModal = false;
                        this.pageNum = 1;
                        this.getDictList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getDictDetail(index, rows, type) {
            this.classBgcFlag = index;
            this.detailsIndex = index;
            this.detailsRows = rows;
            this.detailDictModal = false;
            this.detailDictSysModal = false;
            this.detailId = "";
            this.title = rows[index].name;
            this.sysID = rows[index].id;
            if (type == "class") {
                this.syspageNum = 1;
            }
            let params = {
                pageNum: this.syspageNum,
                pageSize: this.syspageSize,
                sysDictTypeId: rows[index].id,
            };
            getDictType(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.sysDictList = res.data.list;
                        this.systotalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        syspageChange(index) {
            this.syspageNum = index;
            this.getDictDetail(this.detailsIndex, this.detailsRows);
        },
        updateDetailDictRow(type, index, rows) {
            if (type == 0) {
                this.detailIsAdd = true;
                this.detailDictCode = "";
                this.detailDictName = "";
                this.detailDictSysModal = true;
                this.detailDictModal = true;
            } else {
                this.detailDictModal = true;
                this.detailDictCode = rows[index].code;
                this.detailDictName = rows[index].name;
                this.detailIndex = index;
                this.detailIsAdd = false;
                this.detailId = rows[index].id;
                // this.detailDictName = rows[index].name;
                // this.detailDictCode = rows[index].code;
            }
        },
        sumbitcancel() {
            this.detailDictName = null;
            this.detailDictCode = null;
            this.detailDictModal = false;
        },
        sumbitSysDictType(index, rows) {
            if (this.detailDictName == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "数据字典名称不能为空",
                });
                return;
            }
            let url;
            let params = {};
            if (this.detailIsAdd) {
                params = {
                    code: this.detailDictCode,
                    name: this.detailDictName,
                    sysDictTypeId: this.sysID,
                };
                getDictAdd(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.suc();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            } else {
                params = {
                    code: this.detailDictCode,
                    name: this.detailDictName,
                    id: this.detailId,
                };
                getDictEdit(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.detailId = "";
                            this.suc();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            }
        },
        suc() {
            this.$Message.success("操作成功");
            this.detailDictSysModal = false;
            this.syspageNum = this.detailIsAdd ? 1 : this.syspageNum;
            this.syscurrent = this.detailIsAdd ? 1 : this.syscurrent;
            this.getDictDetail(this.detailsIndex, this.detailsRows);
        },
        removeDetailRow(index, rows) {
            this.ids = rows[index].id;
            this.deleteDetailModal = true;
        },
        deteleDetailDict() {
            getDictRemove(this.ids)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.deleteDetailModal = false;
                        this.syspageNum = 1;
                        this.syscurrent = 1;
                        this.getDictDetail(this.detailsIndex, this.detailsRows);
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        cancel(type) {
            if (type == 0) {
                this.dictTypeModal = false;
            } else if (type == 1) {
                this.deleteDictModal = false;
            } else if (type == 2) {
                this.detailDictSysModal = false;
                this.detailId = "";
                this.getDictDetail(this.detailsIndex, this.detailsRows);
            } else if (type == 3) {
                this.deleteDetailModal = false;
            }
        },
    },
    mounted() {
        this.getDictList();
    },
};
</script>

<style lang="less" scoped >
@import "./../../assets/style/themeBase.less";
.main_content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .content {
        width: 100%;
        height: 100%;
        padding: 20px;
        background-color: #ffffff;
        display: flex;
        .left {
            flex: 1;
            /deep/.el-table__row {
                cursor: pointer;
            }
        }
        .right {
            flex: 1;
            margin-left: 2%;
        }
        .table{
            margin-top: 10px;
        }
    }
}
.item3 {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    padding-left: 16px;
    box-sizing: border-box;
    .tip {
        position: absolute;
        color: red;
        font-size: 16px;
        top: 8px;
        left: 0;
    }
}
.left::-webkit-scrollbar {
    display: none;
}
</style>
